<template>
    <div style="text-align:left">

        <el-input style="width: 300px;margin-bottom: 20px" v-model="keyWord" placeholder="搜索用户名或者账号">

        </el-input>

        <div style="margin-bottom: 8px">
            <el-select v-model="Operation" @change="addDeleteDisable" placeholder="操作">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-button type="primary" style="margin-left: 10px" @click="dialogFormVisible = true">
                新增
            </el-button>
        </div>
        <el-table
                ref="multipleTable"
                :data="userList"
                tooltip-effect="dark"
                style="width: 100%"
                border
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>

            <el-table-column
                    prop="account"
                    label="账号"
                    sortable
                    >
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="用户名"
                    @click=""
                    >
            </el-table-column>
            <el-table-column
                    prop="ranked"
                    label="角色"
                    >
                <template slot-scope="scope">{{scope.row.ranked|changeRanked}}</template>
            </el-table-column>
            <el-table-column
                    label="创建时间"
                    sortable
            >
                <template slot-scope="scope">{{ scope.row.createTime|date }}</template>
            </el-table-column>
            <el-table-column
                    label="状态"
                    show-overflow-tooltip>
                <template slot-scope="scope">{{ scope.row.active|changeActive }}</template>
            </el-table-column>
        </el-table>

        <el-pagination
                background
                layout="prev, pager, next"
                :total="pageInfo.total"
                :page-size="pageInfo.pageSize"
                @current-change="handleCurrentChange"
        >
        </el-pagination>
<!--对话框-->
        <el-dialog title="新建用户"  :visible.sync="dialogFormVisible">
            <el-form :model="userInfo" :rules="rules" ref="userInfo">
                <el-form-item label="账号" prop="account" :label-width="formLabelWidth">
                    <el-input style="width: 400px" v-model="userInfo.account" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="name" :label-width="formLabelWidth">
                    <el-input  style="width: 400px" v-model="userInfo.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password" :label-width="formLabelWidth">
                    <el-input  style="width: 400px" v-model="userInfo.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item   label="性别" prop="sex" :label-width="formLabelWidth">
                    <el-select style="width: 400px" v-model="userInfo.sex" placeholder="选择性别">
                        <el-option label="男" value="1"></el-option>
                        <el-option label="女" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="电话" prop="tel" :label-width="formLabelWidth">
                    <el-input  style="width: 400px" v-model="userInfo.tel" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email" :label-width="formLabelWidth">
                    <el-input  style="width: 400px" v-model="userInfo.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item   label="部门" prop="departmentId" :label-width="formLabelWidth">
                    <el-select style="width: 400px" v-model="userInfo.departmentId" placeholder="选择部门">
                        <el-option label="A部门" value="0"></el-option>
                        <el-option label="B部门" value="1"></el-option>
                        <el-option label="C部门" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item   label="权限" prop="name" :label-width="formLabelWidth">
                    <el-select style="width: 400px" v-model="userInfo.ranked" placeholder="选择人员权限">
                        <el-option label="学生" value="0"></el-option>
                        <el-option label="老师" value="1"></el-option>
                        <el-option label="管理员" value="2"></el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="userInfoSubmit('userInfo')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {GetAddDeleteDisable, GetUserList, PostAddUser} from "../../request/api";
    //节流函数
    const delay = (function() {
        let timer = 0;
        return function(callback, ms) {
            clearTimeout(timer);
            timer = setTimeout(callback, ms);
        };
    })();
    export default {
        created() {
          this.getUserInfo();
        },
        data() {
            let telRule = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入电话号码'));
                }
                if(!(/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this.userInfo.tel))){
                    callback(new Error("电话号码格式错误"))
                }
                callback();
            };
            let emailRule = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入邮箱'));
                }
                if(!(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.userInfo.email))){
                    callback(new Error("邮箱格式错误"))
                }
                callback();
            };
            return {
                keyWord:null,//搜索关键词
                dialogFormVisible:false,
                selectId:"",
                Operation:"",
                options:[{
                    label:'启动',
                    value:1
                    },{
                    label:'禁用',
                    value:2
                    },{
                    label:'删除',
                    value:3
                    }],
                pageInfo:{
                    pageNo:0,
                    pageSize:5,
                    total:""
                },
                formInline: {
                    user: '',
                    region: ''
                },
                userList: [],
                userInfo:{
                    account:"",
                    name:"",
                    password:"",
                    sex:"",
                    tel:"",
                    email:"",
                    departmentId:"",
                    ranked:"",
                },
                multipleSelection: [],
                formLabelWidth: '120px',
                rules: {
                    account: [
                        { required: true, message: '请输入账号', trigger: 'blur' },
                        { min: 6, max: 8, message: '长度在 6 到 8 个字符', trigger: 'blur' }
                    ],
                    name: [
                        { required: true, message: '请输入用户名称', trigger: 'blur' },
                        { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
                    ],
                    sex: [
                        { required: true, message: '请选择性别', trigger: 'blur' },
                    ],
                    tel: [
                        { validator: telRule, trigger: 'blur' }
                    ],
                    email: [
                        { validator: emailRule, trigger: 'blur' }
                    ],
                    departmentId: [
                        { required: true, message: '请选择部门', trigger: 'blur' },
                    ],
                    ranked: [
                        { required: true, message: '请选择用户权限', trigger: 'blur' },
                    ],

                },
            }
        },
        watch: {
            "keyWord"() {
                delay(() => {
                    this.getUserInfo();
                }, 1000);
            }
        },
        methods: {

            //对用户激活删除和关闭
            addDeleteDisable(val){
                GetAddDeleteDisable({
                    "type":val,
                    "userIds":this.selectId,
                }).then(resp=>{
                    console.log(resp)
                    if (resp.data.code==200){
                        this.getUserInfo()
                    }
                })
            },
            //获取多个或单个用户信息
            getUserInfo(){
                GetUserList({
                        "keyWord":this.keyWord,
                        "pageNo":this.pageInfo.pageNo,
                        "pageSize":this.pageInfo.pageSize
                }).then(resp=>{
                    console.log(resp)
                    if (resp.data.code==200){
                        this.userList=resp.data.data.userList;
                        this.pageInfo.total=resp.data.data.total;
                        console.log(this.userList)
                        console.log(this.pageInfo.total)
                    }
                })
            },

            handleCurrentChange(val){
                this.pageInfo.pageNo=val;
                this.getUserInfo();
            },
            handleSelectionChange(selection) {
                let temp="";
                for (let i in selection){
                    if (i==selection.length-1){
                        temp=temp+selection[i].id
                    }else {
                        temp=temp+selection[i].id+","
                    }
                }
                this.selectId=temp
            },
            userInfoSubmit(formName) {
                console.log(this.userInfo)
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        PostAddUser(this.userInfo).then(resp=>{
                            console.log(resp)
                            if(resp.data.code==200){
                                this.$message.success("添加成功");
                                this.getUserInfo();
                                this.dialogFormVisible=false
                            }else{
                                this.$message.fail("添加失败");
                            }
                        })
                    } else {
                        this.$message.fail("请按照格式正确填写用户信息");
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        },
        filters:{
            changeActive(val){
                if (val==0){
                    return "未激活"
                }else{
                    return "已激活"
                }
            },
            changeRanked(val){
                if (val==0){
                    return "学生"
                }
                if (val==1){
                    return "老师"
                }
                if (val==2){
                    return "管理员"
                }
            }
        }
    }
</script>
<style scoped>

</style>